import React, { Component, PureComponent } from 'react';
import {
  Table,
  Drawer,
  Form,
  Button,
  Tooltip,
  Checkbox,
} from 'antd';


//查看详情

class SelectCompany extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      companyLists: [],
    };
  }


  componentWillReceiveProps(preProps) {
    const { bindView, companyLists } = preProps;
    if (bindView && Object.keys(companyLists).length > 0) {
      this.setState({
        companyLists: companyLists,
      });
    }
  }


  render() {
    const { bindView, handleBindRole, handleBind } = this.props;
    const { companyLists } = this.state;
    const onChange = (e) => {
      const { companyLists } = this.state;
      let cloneArr = JSON.parse(JSON.stringify(companyLists));
      cloneArr.map((item) => {
        item.checked = false;
        if (e.caNo === item.caNo) {
          item.checked = true;
          return item;
        }
      });
      this.setState({
        companyLists: cloneArr,
      });
    };
    const columns = [
      {
        title: '',
        key: 'dataIndex',
        render(val) {
          return <Checkbox checked={val.checked} onChange={() => onChange(val)}/>;
        },
      },
      {
        title: '企业名称',
        dataIndex: 'enterpriseName',
        key: 'enterpriseName',
      },
      {
        title: '企业编号',
        dataIndex: 'enterpriseNo',
        key: 'enterpriseNo',
      },
      {
        title: '营业地址',
        dataIndex: 'address',
        key: 'address',
        render(val) {
          return <Tooltip title={val}>
            <div style={{
              width: '100px', overflow: 'hidden',
              'whiteSpace': 'nowrap',
              'textOverflow': 'ellipsis',
            }}>{val}</div>
          </Tooltip>;
        },
      },
      {
        title: '法人名称',
        dataIndex: 'legalName',
        key: 'legalName',
      },
    ];

    const handleSelect = () => {
      const { companyLists } = this.state;
      let arr = companyLists.filter((item) => {
        if (item.checked) {
          return item;
        }
      });
      handleBind(false, arr);
    };
    const onCancel = () => {
      handleBindRole(false, []);
    };
    return (
      <Drawer
        width={840}
        destroyOnClose
        title="绑定企业"
        visible={bindView}
        onOk={handleSelect}
        onClose={onCancel}>
        <Table
          columns={columns}
          rowKey={'enterpriseNo'}
          dataSource={companyLists}/>
        <div
          style={{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={onCancel} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={handleSelect} type="primary">
            确定
          </Button>
        </div>
      </Drawer>
    );
  }
};

export default SelectCompany;
